<template>
  <div>
    <van-nav-bar title="健康档案" left-text="" left-arrow @click="fan" />
    <van-notice-bar wrapable :scrollable="false" text="根据国家有关规定，就诊人在未实名认证状态下，平台将无法提供诊断、药品、挂号等服务，请及时实名认证!" class="gen" />
    <button class="add" @click="add">新建档案</button>
    <div class="j-box" v-if="data">
      <div class="j-div">
        <div class="ben">{{gx}}</div>
        <div class="spans">
          <span>{{list.name}}</span>
          <span>{{sex}}</span>
          <span>{{list.time}}</span>
          <p class="tel">{{list.tel}}</p>
        </div>
        <div class="yrz">已认证</div>
      </div>
    </div>
    <div class="j-box" v-else>

    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
const data = localStorage.getItem('data')
const list = JSON.parse(data)
console.log(list)
const router = useRouter()
const add=()=>{
  router.push('/xjda')
}
const fan=()=>{
  router.push('/mine')
}
const sex = localStorage.getItem('sex')
const gx = localStorage.getItem('gx')
const onClickLeft = () => history.back();
</script>
<style scoped>
.gen{
  width: 94%;
  margin-left: 3%;
  border-radius: 10px;
  background-color: #FFEFE3;
  color: #FF5B08;
}
.add{
  width: 94%;
  height: 100px;
  background-color: #0070FF;
  color: #fff;
  border: none;
  text-align: center;
  border-radius: 10px;
  margin-left: 3%;
  position: fixed;
  bottom: 20px;
  font-size: 34px;
}
.j-box{
  width: 100%;
  height: 880px;
  margin-top: 20px;
  background-color: #F5F5F5;
}
.j-div{
  width: 94%;
  height: 150px;
  background-color: #fff;
  margin-left: 3%;
  display: flex;
  position: absolute;
  top: 310px;
}
.ben{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #4A95FA;
  color: #fff;
  text-align: center;
  line-height: 80px;
  margin: 40px;
}
.spans{
  margin-top: 40px;
  font-size: 30px;
  font-weight: 600;
}
.spans>span{
  margin-right: 10px;
}
.tel{
  margin-top: 10px;
  font-weight: 400;
  color: #CECECE;
  font-size: 24px;
}
.yrz{
  width: 100px;
  height: 40px;
  background-color: #DDF8F2;
  margin-left: 260px;
  color: #00BC8E;
  font-size: 25px;
  font-weight: 600;
  text-align: center;
  line-height: 40px;
  border-radius: 20px 20px 20px 0;
  margin-top: 40px;
}
</style>
